<template>
    <div class="">
        <GroupItem titleName="史杰克西定量炉" :defaultList="shijiekeList">
            <template #Tcurve>
                <TeCarts :optionsData="optionsData" echartsName="echartsName"/>
                <p class="tips-text">24小时温度曲线图</p>
            </template>
        </GroupItem>
    </div>
</template>
<script setup>
import { ref } from "vue"
import GroupItem from "@/components/groupItem/index.vue"
import TeCarts from "@/components/TEcharts/index.vue"
const shijiekeList = ref([
    {
        id: 1,
        title: "开始位置",
        value: "58H",
        color: ""
    },
    {
        id: 2,
        title: "真空度",
        value: "58H",
        color: ""
    }
])

const optionsData = ref({
        title: {
            text: "",
            left: "center",
        },
        legend: {
            left: 'right', // 位置
            itemGap: 12, // 设置间距
        },
        grid:{
            top:"10px",
            left:"0",
            right:"0",
            bottom:"10px"
        },
        xAxis: {
            type: "category",
            data: [
                "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
            ],
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
                show: false // 不显示坐标轴刻度线
            },
            axisLine: {
                show: false, // 不显示坐标轴线
            },
            axisLabel: {
                show: false, // 不显示坐标轴上的文字
            },
            splitLine: {
                show: false // 不显示网格线
            },
        },
        yAxis: {
            type: "value",
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
                show: false // 不显示坐标轴刻度线
            },
            axisLine: {
                show: false, // 不显示坐标轴线
            },
            axisLabel: {
                show: false, // 不显示坐标轴上的文字
            },
            splitLine: {
                show: false // 不显示网格线
            },
        },
        color:['#FEE186'],
        series: [
            {
                data: [
                    606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
                ],
                type: "line",
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
            }
        ]
    })


</script>
<style lang="scss" scoped>
.tips-text{
  text-align: center;
}
</style>
  